<template>
	<view>
		<view class="bg-orange" :style="{height:StatusBar+'px'}"></view>
		<view class="contents position-rel">
			<view class="circle-orange"></view>
			<view class="white flex align-end position-rel z-i-1">
				<view class="fontBold f-24">
					点 餐 详 情
				</view>
				<view class=" eng">
					/ORDERING DETAILS
				</view>
			</view>
			
		</view>
		<view class="p-l-15 p-r-15 p-t-5 p-b-10 m-b-15 position-rel z-i-1">
			<view class="fontBold f-18 white">
				客户列表
			</view>
			<view class="restaurant-item flex align-center" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<view class="flex align-center">
					<image :src="item.photo?item.photo:'/static/img/headimg.png'" class="restaurant-img"></image>
				</view>
				<view class="p-l-15 p-r-15 flex-1">
					<view class="restaurant-desc fontBold ">
						<view class="flex justify-space-between align-center">
							<view class="orange f-16">
								{{item.user_name}}
							</view>
							<view class="f-15 fontBold yellow">
								{{item.accept_orders==1?'已接单':item.accept_orders==2?'已拒绝':item.accept_orders==3?'已完成':'待处理'}}
							</view>
						</view>
						
						<view class="f-12 m-t-2 text-overflow-1">
							人数：{{item.user_num}}人
						</view>
						<view class="f-12 m-t-2 text-overflow-1">
							时间：{{item.book_at}}
						</view>
						<view class="f-12 m-t-2 text-overflow-1">
							包间：{{item.compartment_name}}
						</view>
						<view class="f-12 m-t-2 text-overflow-1">
							车牌：{{item.car_num}}
						</view>
						<view class="f-12 m-t-2">
							联系方式：{{item.username}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length == 0">
			暂无数据~
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap flex align-center flex-direction">
			<view class="flex align-center justify-center">
				<image src="/static/img/fooded.png" class="food" mode=""></image>
			</view>
			<view class="f-12 fontBold orange flex justify-center">
				点餐详情
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				last_page:1,
			}
		},
		onLoad(option) {
			this.getIndex();
		},
		onReachBottom(){
			if(this.page >= this.last_page)return;
			this.page++;
			this.getIndex();
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url:'/pages/operate/customerDetail?mid='+item.id
				})
			},
			getIndex(){
				let data = {
					page:this.page
				}
				this.$http('/apimanager/Shop_Info/userOrderList',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						let list = datas.list.data;
						this.last_page = datas.list.last_page;
						if(this.page == 1){
							
							this.list = list;
						}else{
							this.list = this.list.concat(list);
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page{
		overflow-x: hidden;
	}
	.circle-orange {
		width: 650px;
		height: 620px;
		background: #FF5200;
		border-radius: 50%;
		position: absolute;
		top: -325px;
		left: 50%;
		transform: translateX(-50%);
	}

	.eng {
		letter-spacing: 1px;
	}

	.restaurant-item{
		margin-top: 24rpx;
		background: rgba(255,255,255,1);
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		.restaurant-img{
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}
		.restaurant-desc{
			
			position: relative;
			z-index: 2;
		}
	}
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
		.food{
			width: 52rpx;
			height: 52rpx;
		}
		
	}
</style>